<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<title>Dynamic Chart</title>
	<script src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.js" type="text/javascript"></script>
	<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.css"/>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0px;
		}
	</style>	
</head>
<body>
	<script type="text/javascript">
		var contextPath = "${pageContext.request.contextPath}" + "/resources/tutorial";
		dhtmlxEvent(window, "load", function(){
			
			var layout = new dhtmlXLayoutObject(document.body, "3L");
			layout.cells("a").setWidth(270);
			layout.cells("a").setText("Profit & Loss reports");
			layout.cells("b").hideHeader();
			layout.cells("c").hideHeader();

			var grid = layout.cells("c").attachGrid();
			grid.setImagePath(contextPath + "/common/dhtmlx/imgs/");       
			grid.setHeader("Year,Quarter,Profits per quarter ($),Losses per quarter ($), A person responsible for the data");     
			grid.setColTypes("ro,ro,ro,ro,ro");             
			grid.setInitWidths("100,150,230,230,*");   
			grid.setColAlign("center,center,center,center,center");
			grid.init();
			// grid.load(contextPath + "/tutorial3xml/gridData.xml");
			
			var chart = layout.cells("b").attachChart({
    			view:"bar",                                
    			value:"#data2#",                  
    			color:"#36abee",                 
    			padding:{left:75, bottom:50, top:50, right:30}, 
    			yAxis:{start:0, step:50000, title:"Value ($)"}, 
   				 xAxis:{ template:function(obj){
    				return "<span class='quarter'>" + obj.data1 + "</span>" + (obj.data1=="I"?" </br>'" + obj.data0.substr(2,2):"")}
    			},
    			preset:"column",                                
			    border:0                                       
			});
			
			grid.load(contextPath + "/tutorial3xml/gridData.xml", function(){
				chart.parse(grid, "dhtmlxgrid");
			});
			
			var form = layout.cells("a").attachForm();
			form.loadStruct(contextPath + "/tutorial3xml/form.xml");

			form.attachEvent("onChange", function (id,value){            
	        	var formValues = form.getFormData();                      

	            var field = (formValues.report_type == "profits"? "data2" : "data3");  
	            chart.clearAll();                                            
	            chart.define("value", "#"+field+"#");                       
	            chart.parse(grid,"dhtmlxgrid");                              

	            if ( formValues.filter == "last5") {                         
					var currentYear = new Date().getFullYear();              
	                chart.filter(function(obj){                              
                        return obj.data0 > (currentYear-5);                  
                    })
	            }

	            var groupConfig = {by: "#data0#", map:{} };                    
	            if ( formValues.grouping == "none") {                          
	                chart.define("xAxis", function(obj){                       
						return "<span class='quarter'>"+obj.data1+"</span>"+(obj.data1=="I"?" </br>'"+obj.data0.substr(2,2):"");
					})
	            } 
	            else if ( formValues.grouping == "total"){                    
	                groupConfig.map[field] = ["#"+field+"#","sum"];
	                chart.group(groupConfig);                
	                chart.define("xAxis",{ template: "#id#" });                 
	            } 
	            else if (formValues.grouping == "average"){                   
	                groupConfig.map[field] = ["#"+field+"#",function(prop, data){ 
	               		var summ = 0;                                          
	                    for(var i = 0; i < data.length; i++){
	          	            summ += parseFloat(data[i][field]);
	                    }
	                    return summ/data.length;
	  	            }];	
	              	chart.group(groupConfig);                                  
	                chart.define("xAxis",{ template: "#id#" });                
	      	    }
		        chart.render();                                                
	    	});
		});
	</script>
</body>
</html>